<template>
  <div class="dashboard">
    仪表盘

    <el-table border striped :data="orders"> 
      <el-table-column prop="orderId" label="ID" width="180" fixed></el-table-column>
      <el-table-column prop="address" label="订单地址" width="180" fixed></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
      <el-table-column prop="contact" label="联系人" width="180"></el-table-column>
      <el-table-column prop="pay" label="订单金额" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180" fixed="right"></el-table-column>
    
    </el-table>
  </div>
</template>


<script setup lang="ts">
import  {onBeforeUnmount, ref} from 'vue'

// 订单数据
const orders = ref<any[]>([])


// 利用webSocket实时获取 C端用户提交叫的订单数据
// 创建websocket实例
const ws = new WebSocket("ws://162.14.108.31:6954/orders")

// 接收服务端实时发送的数据
ws.addEventListener("message",(event)=>{
  console.log(event.data)
  orders.value = JSON.parse(event.data)
})

// ws.onmessage = function (e) {
//   console.log(e)
// }


// 组件卸载，释放资源
onBeforeUnmount(()=>{
  ws.close()
})


// 卸载销毁时，通常销毁的资源有：
//  websocket ，定时器，订阅事件，echarts，富文本编辑器实例 ，未完成的网络请求
</script>

<style lang="less" scoped>

</style>
